<template>
  <div class="sidebar" :class="{ collapsed: isCollapsed, 'is-mobile': isMobile }">
    <div class="logo-container">
      <div class="logo">
        <span v-if="!isCollapsed">学生管理系统</span>
        <span v-else>学生</span>
      </div>
      <div class="collapse-btn" @click="toggleSidebar">
        <el-icon>
          <Expand v-if="isCollapsed" />
          <Fold v-else />
        </el-icon>
      </div>
    </div>
    
    <el-menu
      :default-active="activeMenu"
      class="sidebar-menu"
      :collapse="isCollapsed"
      background-color="#304156"
      text-color="#bfcbd9"
      active-text-color="#409EFF"
      router
    >
      <el-menu-item index="/">
        <el-icon><House /></el-icon>
        <template #title>首页</template>
      </el-menu-item>
      
      <el-sub-menu index="student">
        <template #title>
          <el-icon><User /></el-icon>
          <span>学生管理</span>
        </template>
        <el-menu-item index="/student-manage">学生列表</el-menu-item>
      </el-sub-menu>
      
      <el-sub-menu index="teacher">
        <template #title>
          <el-icon><Avatar /></el-icon>
          <span>教师管理</span>
        </template>
        <el-menu-item index="/teacher-manage">教师列表</el-menu-item>
      </el-sub-menu>
      
      <el-sub-menu index="course">
        <template #title>
          <el-icon><Reading /></el-icon>
          <span>课程管理</span>
        </template>
        <el-menu-item index="/course-manage">课程列表</el-menu-item>
      </el-sub-menu>
      
      <el-sub-menu index="class">
        <template #title>
          <el-icon><School /></el-icon>
          <span>综合管理</span>
        </template>
        <el-menu-item index="/school-manage">学院列表</el-menu-item>
        <el-menu-item index="/class-manage">班级列表</el-menu-item>
      </el-sub-menu>
      
      <el-sub-menu index="grade">
        <template #title>
          <el-icon><Histogram /></el-icon>
          <span>成绩管理</span>
        </template>
        <el-menu-item index="/grade-manage">成绩列表</el-menu-item>
      </el-sub-menu>
      
      <el-menu-item index="/role-manage">
        <el-icon><Setting /></el-icon>
        <template #title>角色管理</template>
      </el-menu-item>
      
      <el-sub-menu index="system">
        <template #title>
          <el-icon><Tools /></el-icon>
          <span>系统管理</span>
        </template>
        <el-menu-item index="/config-manage">配置管理</el-menu-item>
        <el-menu-item index="/serial-number-manage">编号管理</el-menu-item>
        <el-menu-item index="/dictType-manage">字典管理</el-menu-item>
        <el-menu-item index="/settings">系统设置</el-menu-item>
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import {
  House,
  User,
  Avatar,
  Reading,
  School,
  Histogram,
  Setting,
  Tools,
  Expand,
  Fold
} from '@element-plus/icons-vue';

// 定义props
const props = defineProps({
  isCollapsed: {
    type: Boolean,
    default: false
  },
  isMobile: {
    type: Boolean,
    default: false
  }
});

// 定义emits
const emit = defineEmits(['toggle-sidebar']);

const route = useRoute();
const activeMenu = ref('/');

// 切换侧边栏
const toggleSidebar = () => {
  emit('toggle-sidebar');
};

// 生命周期
onMounted(() => {
  activeMenu.value = route.path;
});
</script>

<style scoped>
/* 侧边栏样式 */
.sidebar {
  width: 220px;
  background-color: #304156;
  transition: width 0.3s;
  overflow: hidden;
  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.08);
  height: 100vh;
  position: relative;
  z-index: 100;
}

.sidebar.collapsed {
  width: 64px;
}

.logo-container {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  background-color: #2b2f3a;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

.collapse-btn {
  cursor: pointer;
  color: #bfcbd9;
}

.sidebar-menu {
  border-right: none;
  height: calc(100vh - 60px);
  overflow-y: auto;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .sidebar.is-mobile {
    position: fixed;
    z-index: 100;
    height: 100vh;
    transform: translateX(0);
    transition: transform 0.3s ease;
  }
  
  .sidebar.is-mobile.collapsed {
    transform: translateX(-100%);
    width: 220px;
  }
}
</style>